<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    
    .main{
			display: inline-block;/*在一行显示，*/
		}
		.main input{
			display: none;/*对.main input进行隐藏，用span.test来代替按钮，再进行样式编写*/
		}
		#test{
			box-sizing: border-box;
			position: relative;
			display: inline-block;
			width: 16px;
			height: 16px;
			border: 1px solid rgba(47, 183, 236, 1);
			border-radius: 50%;
			float: left;
			margin: 4px 10px 0;
			padding: 3px;
			background-clip: content-box;
		}
		input:checked + span{
			background: rgba(47, 183, 236, 1)
		}

    </style>
</head>
<body>
    <label for="male" class="main">
        <input type="radio" name="sex" id="male" value="male">男
        <span id="test"></span>
    </label>
    <label for="female" class="main">
        <input type="radio" name="sex" id="female" value="female">女
        <span id="test"></span>
    </label>

</body>
</html>